<template>
  <div class="app-container">
    <!-- 新增、修改、删除、搜索栏 -->
    <el-row
      :gutter="15"
      class="mb8"
    >
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          plain
          size="mini"
          @click="handelAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="single"
          icon="el-icon-edit"
          plain
          size="mini"
          @click="handelEdit"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="multiple"
          icon="el-icon-delete"
          plain
          size="mini"
          @click="handelDel"
        >删除
        </el-button>
      </el-col>

      <el-form
        ref="queryDataRef"
        :inline="true"
        :model="queryData"
        class="el-form-search"
      >
        <!--变电站名称-->
        <el-form-item
          class="el-form-search-item"
          label="名称"
          prop="substationName"
        >
          <el-input
            v-model.trim="queryData.substationName"
            clearable
            placeholder="请输入变电站名称"
          ></el-input>
        </el-form-item>
        <!--地区-->
        <el-form-item
          class="el-form-search-item"
          label="地区"
          prop="areaNum"
        >
          <treeselect
            v-model="queryData.areaNum"
            :normalizer="normalizer"
            :options="areaOptions"
            placeholder="选择地区"
            style="width: 180px"
          />
        </el-form-item>
        <!--客户公司名称-->
        <el-form-item
          class="el-form-search-item"
          label="客户"
          prop="customerNum"
        >
          <el-select
            v-model="queryData.customerNum"
            clearable
            filterable
            placeholder="请选择客户"
          >
            <el-option
              v-for="item in customerOptions"
              :key="item.num"
              :label="item.companyName"
              :value="item.num"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--客户联系人-->
        <!-- <el-form-item
          class="el-form-search-item"
          label="联系人"
          prop="contactName"
        >
          <el-input
            v-model.trim="queryData.contactName"
            clearable
            placeholder="请输入联系人名称"
          ></el-input>
        </el-form-item> -->
        <el-form-item class="el-form-search-item">
          <el-button
            icon="el-icon-search"
            size="mini"
            type="primary"
            @click="handelQuery"
          >搜索
          </el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <!-- 数据列表展示 -->
    <el-table
      v-loading="loading"
      :data="substationList"
      :height="tableHeight"
      @selection-change="handelSelectionChange"
      border
      stripe
      highlight-current-row
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        align="center"
        label="#"
        type="index"
        width="50"
      >
        <template slot-scope="scope">
          {{ (queryData.pageNum - 1) * queryData.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="名称"
        prop="substationName"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        label="地区"
        prop="ancestorNames"
        width="200"
      ></el-table-column>
      <el-table-column
        align="center"
        label="位置"
        prop="location"
        width="240"
      ></el-table-column>
      <el-table-column
        align="center"
        label="公司名称"
        prop="customer.companyName"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        label="联系人"
        prop="customer.contactName"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        label="电话"
        prop="customer.phone"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        label="总容量"
        prop="totalCapacity"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        label="并网点数量"
        prop="pointsAmount"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        label="规模描述"
        prop="scaleDesc"
      ></el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handelEdit(scope.row)"
          >修改
          </el-button>
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handelDel(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <pagination
      v-show="total > 0"
      :limit.sync="queryData.pageSize"
      :page.sync="queryData.pageNum"
      :total="total"
      @pagination="getList"
    />

    <el-dialog
      :title="title"
      :visible.sync="open"
      v-dialogDrag
      width="800px"
    >
      <el-form
        ref="formDataRef"
        :model="formData"
        :rules="rules"
        label-width="92px"
      >
        <!--第一行-->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="名称"
              prop="substationName"
            >
              <el-input
                v-model.trim="formData.substationName"
                clearable
                placeholder="请输入变电站名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 下拉框 -->
            <el-form-item
              label="客户"
              prop="customerNum"
            >
              <el-select
                v-model="formData.customerNum"
                clearable
                filterable
                placeholder="请选择客户"
                class="from-select"
              >
                <el-option
                  v-for="item in customerOptions"
                  :key="item.num"
                  :label="item.companyName"
                  :value="item.num"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="地区"
              prop="areaNum"
            >
              <treeselect
                v-model="formData.areaNum"
                :normalizer="normalizer"
                :options="areaOptions"
                placeholder="选择地区"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row :gutter="15">
          <el-col :span="24">
            <!--textarea输入-->
            <el-form-item
              label="位置"
              prop="location"
            >
              <el-input
                v-model.trim="formData.location"
                :maxlength="150"
                :rows="2"
                clearable
                placeholder="请输入变电站所在位置"
                resize="none"
                show-word-limit
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!--第四行-->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="总容量"
              prop="totalCapacity"
            >
              <el-input
                v-model.trim="formData.totalCapacity"
                :disabled="disabled"
                clearable
                placeholder="请输入变电站总容量"
              >
                <template slot="append">MW</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="并网点数量"
              prop="pointsAmount"
            >
              <el-input
                v-model.trim="formData.pointsAmount"
                :disabled="disabled"
                clearable
                placeholder="请输入变电站下并网点数量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行 -->
        <el-row :gutter="15">
          <el-col :span="24">
            <!--textarea输入-->
            <el-form-item
              label="规模描述"
              prop="scaleDesc"
            >
              <el-input
                v-model.trim="formData.scaleDesc"
                :maxlength="150"
                :rows="2"
                clearable
                placeholder="请输入变电站规模描述"
                resize="none"
                show-word-limit
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitFormData"
        >提交</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  listSubstation,
  addSubstation,
  getSubstationByNum,
  editSubstation,
  delSubstation,
} from "@/api/maintenance/substation";
import { listCustomer } from "@/api/maintenance/customer";
import { listArea } from "@/api/maintenance/area";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Substation",
  components: { Treeselect },
  data() {
    return {
      loading: false,
      /**搜索栏数据 */
      queryData: {
        pageNum: 1,
        pageSize: 30,
        substationName: undefined,
        areaNum: undefined,
        customerNum: undefined,
        contactName: undefined,
        orderByColum: "update_time",
        isAsc: "asc",
      },
      single: true,
      multiple: true,

      /**表格数据 */
      // 表格的高度
      tableHeight: "calc(100vh - 200px)",
      substationList: [],
      total: 0,
      ids: [],

      /**对话框 */
      title: "",
      open: false,
      formData: {
        totalCapacity: 0,
        pointsAmount: 0,
      },
      rules: {
        substationName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        totalCapacity: [
          { validator: this.formValidation.validateNumber, trigger: "blur" },
          { required: true, message: "总容量不能为空", trigger: "blur" },
        ],
        pointsAmount: [
          { validator: this.formValidation.validateNumber, trigger: "blur" },
          { required: true, message: "并网点数量不能为空", trigger: "blur" },
        ],
      },
      customerOptions: [],
      areaOptions: [],
      disabled: false, //新增的时候控制并网点和容量禁用
    };
  },
  created() {
    this.getList();
    /**查询客户 */
    listCustomer().then((response) => {
      this.customerOptions = response.rows;
    });
    // 查询地区列表
    listArea().then((response) => {
      this.areaOptions = this.handleTree(
        response.data.filter((item) => item.num !== 1),
        "num"
      );
    });
  },
  methods: {
    /**查询变电站列表 */
    getList() {
      this.loading = true;
      listSubstation(this.queryData).then((response) => {
        console.log(response.rows);

        this.substationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**重置对对话框form表单 */
    reset() {
      this.formData = {
        totalCapacity: 0,
        pointsAmount: 0,
      }
      this.resetForm("formDataRef");
      /**查询客户 */
      listCustomer().then((response) => {
        this.customerOptions = response.rows;
      });
      // 查询地区列表
      listArea().then((response) => {
        this.areaOptions = this.handleTree(
          response.data.filter((item) => item.num !== 1),
          "num"
        );
      });
    },
    /**新增变电站 */
    handelAdd() {
      this.reset();
      this.title = "新增变电站";
      this.open = true;
      this.disabled = true;
    },
    /**修改变电站 */
    handelEdit(row) {
      this.reset();
      const num = row.num || this.ids[0];
      getSubstationByNum(num).then((response) => {
        this.formData = response.data;
        this.title = "修改变电站";
        this.open = true;
      });
    },
    /**删除变电站 */
    handelDel(row) {
      const num = row.num || this.ids;

      this.$modal
        .confirm("确认删除吗?")
        .then(function () {
          return delSubstation(num);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功!");
          this.getList();
        })
        .catch(() => {});
    },
    /**搜索 */
    handelQuery() {
      this.queryData.pageNum = 1;
      this.getList();
    },
    /**重置搜索 */
    resetQuery() {
      this.resetForm("queryDataRef");
      this.handelQuery();
    },
    /**多选 */
    handelSelectionChange(val) {
      this.ids = val.map((item) => item.num);
      this.single = this.ids.length != 1;
      this.multiple = !this.ids.length;
    },
    /**提交 */
    submitFormData() {
      this.$refs["formDataRef"].validate((valid) => {
        if (valid) {
          if (this.formData.num != undefined) {
            //修改
            editSubstation(this.formData).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
              this.open = false;
            });
          } else {
            //新增
            addSubstation(this.formData).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.getList();
              this.open = false;
            });
          }
        }
      });
    },
    /**取消 */
    close() {
      this.resetForm("formDataRef");
      this.open = false;
    },
    /** 转换地区数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.num,
        label: node.name,
        children: node.children,
      };
    },
  },
};
</script>
